import { Menu } from 'antd';
import React from 'react';
// 高阶组件，包裹useNavigate()功能
import WidthUseNavigate from './widthUseNavigate';
import runng from '../../../static/menu/runng.png'
import menuList from "../../../config/menuList.js";

class SiderLeft extends React.Component {
    constructor(props) {
        super(props);

    }

    click = (e) => {
        console.log(e);
        console.log(e.key);
        //注意this指向问题，采用箭头函数this就指向当前组件
        this.props.to(e.key);
    }

    openChange() {
        console.log('OpenChange');
    }
    render() {
        return (
            <Menu
                theme="dark"
                mode="inline"
                defaultSelectedKeys={['/home']}
                defaultOpenKeys={['/home/user']}
                style={{
                    height: '100%',
                    borderRight: 0,
                    backgroundColor: '#282D32',
                    color: 'white',
                    subMenuItemBg: '#282D32',

                }}
                items={menuList}
                onOpenChange={() => this.openChange()}
                onClick={this.click}
            />
        )
    }
}
// 使用高阶组件包裹当前类组件
const NavigateCompont = WidthUseNavigate(SiderLeft);
// 导出包裹后的类组件
export default NavigateCompont;
